<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Support For Browsers without Frames</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style type="text/css">
      pre {
        font-weight: bold;
        color: #00008B;
        background-color: #D3D3D3;
      }
    </style>
  </head>
  <body>
    <h2>Support For Browsers without Frames</h2>
    <p>
      Framesets are widely supported, but they may not be handled well, or at all, by some web browsers.  To facilitate the user of a screen reader or possibly a mobile phone, I enabled the "My Design" section to be browsable without frames. I combined the content of the main and navigation frames into the "noframes" body of the frameset page. Below is the HTML used to implement the frame-less "My Design" and a <a href="#screen-capture">screen capture</a> from it.
    </p>
    <pre>
      &lt;noframes&gt;
        &lt;body&gt;
          &lt;h1&gt;My Design&lt;/h1&gt;
          &lt;p&gt;This page discusses the usability and accessiblity considerations of my web page.
           Please see the following links for details on each feature.&lt;/p&gt;
          &lt;h3&gt;Accessibility&lt;/h3&gt;
          &lt;ul title="A list of links to my accessibility features."&gt;
            &lt;li&gt;&lt;a href="usability/structure.html"&gt;Logically Structured HTML&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="usability/no-frame.html"&gt;Non-Frameset Browsing Support&lt;/a&gt;&lt;/li&gt;          
            &lt;li&gt;&lt;a href="usability/non-graphical.html"&gt;Non-graphical Descriptions&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;h3&gt;Usability&lt;/h3&gt;
          &lt;ul title="A list of links to my usability features."&gt;
            &lt;li&gt;&lt;a href="usability/navigation.html"&gt;Consistent Navigation&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="usability/page-sizing.html"&gt;Relative Page Sizing&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="usability/titles.html"&gt;Relevent Titles&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;p&gt;&lt;a href="index.html"&gt;Back to Home&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="http://validator.w3.org/check?uri=referer"&gt;
              &lt;img src="http://www.w3.org/Icons/valid-xhtml10"
                   alt="Valid XHTML 1.0 Strict" height="31" width="88"/&gt;
            &lt;/a&gt;
          &lt;/p&gt;
        &lt;/body&gt;
      &lt;/noframes&gt;    
    </pre>
    <p>
      <img id="screen-capture" src="../images/no-frames.jpg" alt="A screen capture of the design page without frames enabled." style="border: solid;"/>
    </p>
    <p>
      <a href="http://validator.w3.org/check?uri=referer">
        <img src="http://www.w3.org/Icons/valid-xhtml10"
             alt="Valid XHTML 1.0 Strict" height="31" width="88"/>
      </a>
    </p>
  </body>
</html>
